<template>
  <div class="demo_box">
    <h3>{{ title }}</h3>

    <div v-for="(item, index) in nameList" :key="item.id">
      <component :is="item.type">
      </component>
    </div>


    <!-- <newImage />
    <newText />
    <newAudio />
    <newVideo /> -->
  </div>

</template>

<script>
import nameList from "./nameList.js";
import newImage from "./components/newImage.vue";
import newAudio from "./components/newAudio.vue";
import newText from "./components/newText.vue";
import newVideo from "./components/newVideo.vue";

export default {
  name: '',
  data() {
    return {
      nameList,
      title: '动态组件练习',

    }
  },
  components: { newImage, newAudio, newText, newVideo },
  computed: {
    nameList() {
      return this.nameList.map(d => {
        return {
          ...d,
          type: 'new' + d.type,
        }
      });

    }

  }
}

</script>